<?xml version="1.0" encoding="UTF-8"?><d:tdl xmlns="http://www.w3.org/1999/xhtml" xmlns:b="http://www.backbase.com/2006/btl" xmlns:bb="http://www.backbase.com/2006/client"  xmlns:d="http://www.backbase.com/2006/tdl" >

	<d:namespace name="http://www.backbase.com/2006/btl">

		<d:uses element="element" src="../../element/element.xml"/>

		<d:element name="skinSettings" extends="b:element">
			

			<d:resource type="text/javascript"><![CDATA[
				btl.skinSettings = {};

				btl.skinSettings.animateTransitions = false;
				btl.skinSettings.transitionType = 'slide';

				btl.skinSettings.getTransitionType = function btl_skinSettings_getTransitionType(oController){
					var sTransitionType = 'none';
					var sWidgetName = oController.getProperty('localName');

					// get global settings
					if(btl.skinSettings.animateTransitions)
						sTransitionType = btl.skinSettings.transitionType;

					// get widget type level settings. Widget type level settings are only applied when global settings aren't forced or when widget type level settings are forced.
					if(btl.skinSettings[sWidgetName]){
						if(btl.skinSettings[sWidgetName].animateTransitions && (!btl.skinSettings.forceAnimateTransitions || btl.skinSettings[sWidgetName].forceAnimateTransitions))
							sTransitionType = btl.skinSettings[sWidgetName].transitionType;
					} else {
						// create object anyway since there is a test in the following code. The test will always be true as the property will be undefined.
						btl.skinSettings[sWidgetName] = {};
					}

					// get local settings. Widget level settings are only applied when global settings aren't forced and when widget type level settings aren't forced.
					if (oController.hasAttribute('transitionType') && (!btl.skinSettings.forceAnimateTransitions && !btl.skinSettings[sWidgetName].forceAnimateTransitions))
						sTransitionType = oController.getAttribute('transitionType');

					return sTransitionType;
				}

				btl.skinSettings.createStyleSheet = function btl_skinSettings_createStyleSheet(sCSS){
					if(sCSS === undefined){
						sCSS = '';
						sCSS += '.btl-chameleon-normalText                  { color: #000; }';
						sCSS += '.btl-chameleon-normalBorder                { border-color: #35A0E9;}';
						sCSS += '.btl-chameleon-normalBackgroundAsBorder    { background-color: #35A0E9;}';
						sCSS += '.btl-chameleon-normalBackground            { background-color: #FFF;}';

						sCSS += '.btl-chameleon-highlightText               { color: #FFF !important; }';
						sCSS += '.btl-chameleon-highlightBorder             { border-color: #B2DBF6 !important;}';
						sCSS += '.btl-chameleon-highlightBackgroundAsBorder { background-color: #B2DBF6 !important;}';
						sCSS += '.btl-chameleon-highlightBackground         { background-color: #35A0E9 !important;}';

						sCSS += '.btl-chameleon-activeText                  { color: #000 !important; }';
						sCSS += '.btl-chameleon-activeBorder                { border-color: #35A0E9 !important;}';
						sCSS += '.btl-chameleon-activeBackgroundAsBorder    { background-color: #35A0E9 !important;}';
						sCSS += '.btl-chameleon-activeBackground            { background-color: #B2DBF6 !important;}';

						sCSS += '.btl-chameleon-infoText                    { color: #000 !important; }';
						sCSS += '.btl-chameleon-infoBorder                  { border-color: #35A0E9 !important;}';
						sCSS += '.btl-chameleon-infoBackgroundAsBorder      { background-color: #35A0E9 !important;}';
						sCSS += '.btl-chameleon-infoBackground              { background-color: #EAF5FC !important;}';

						sCSS += '.btl-chameleon-disabledText                { color: #999 !important; }';
						sCSS += '.btl-chameleon-disabledBorder              { border-color: #AAA !important;}';
						sCSS += '.btl-chameleon-disabledBackgroundAsBorder  { background-color: #AAA !important;}';
						sCSS += '.btl-chameleon-disabledBackground          { background-color: #FFF !important;}';
					}

					var styleTag;
					// build style tag
					if (bb.browser.ie) {
						var oDiv = document.createElement('div');
						/* for some reason, the space (&#160;) needs to be added.... */
						var sHTML = '&#160;<style>' + sCSS + '</style>';
						oDiv.innerHTML = sHTML;
						styleTag = oDiv.childNodes[1];
						oDiv.removeChild(styleTag);
					} else {
						styleTag = document.createElement('style');
						styleTag.appendChild( document.createTextNode( sCSS ) );
					}

					// if btl.skinSettings.styleSheet property isn't set append tag
					if(!btl.skinSettings.styleSheet){
						document.getElementsByTagName('head')[0].appendChild(styleTag);

					// if it is set, replace the old tag
					} else {
						btl.skinSettings.styleSheet.parentNode.replaceChild(styleTag, btl.skinSettings.styleSheet);
					}

					// set btl.skinSettings.styleSheet
					btl.skinSettings.styleSheet = styleTag;
				};

				btl.skinSettings.createStyleSheet();
			]]></d:resource>

			<d:resource type="text/css"><![CDATA[/****************************\
**	light:          #E6E8EB; **
**	light (darker): #D0D2D6; **
**	dark (lighter): #8B8D91; **
**	dark:           #000000; **
\****************************/
/* border */
.btl-border,
.btl-border-top-bottom,
.btl-border-top {
	border-top: 1px solid #8B8D91; /* dark (lighter) */
}
.btl-border,
.btl-border-left-right,
.btl-border-right {
	border-right: 1px solid #8B8D91; /* dark (lighter) */
}
.btl-border,
.btl-border-top-bottom,
.btl-border-bottom {
	border-bottom: 1px solid #8B8D91; /* dark (lighter) */
}
.btl-border,
.btl-border-left-right,
.btl-border-left {
	border-left: 1px solid #8B8D91; /* dark (lighter) */
}
/* bevel */
.btl-bevel,
.btl-bevel-top-bottom,
.btl-bevel-top {
	border-top: 1px solid #E6E8EB; /* light */
}
.btl-bevel,
.btl-bevel-left-right,
.btl-bevel-right {
	border-right: 1px solid #8B8D91; /* dark (lighter) */
}
.btl-bevel,
.btl-bevel-top-bottom,
.btl-bevel-bottom {
	border-bottom: 1px solid #8B8D91; /* dark (lighter) */
}
.btl-bevel,
.btl-bevel-left-right,
.btl-bevel-left {
	border-left: 1px solid #E6E8EB; /* light */
}
/* ridge */
.btl-ridge,
.btl-ridge-top-bottom,
.btl-ridge-top {
	border-top: 1px solid #D0D2D6; /* light (darker) */
}
.btl-ridge,
.btl-ridge-left-right,
.btl-ridge-right {
	border-right: 1px solid #000000; /* dark */
}
.btl-ridge,
.btl-ridge-top-bottom,
.btl-ridge-bottom {
	border-bottom: 1px solid #000000; /* dark */
}
.btl-ridge,
.btl-ridge-left-right,
.btl-ridge-left {
	border-left: 1px solid #D0D2D6; /* light (darker) */
}
.btl-ridge-inner,
.btl-ridge-inner-top-bottom,
.btl-ridge-inner-top {
	border-top: 1px solid #E6E8EB; /* light */
}
.btl-ridge-inner,
.btl-ridge-inner-left-right,
.btl-ridge-inner-right {
	border-right: 1px solid #8B8D91; /* dark (lighter) */
}
.btl-ridge-inner,
.btl-ridge-inner-top-bottom,
.btl-ridge-inner-bottom {
	border-bottom: 1px solid #8B8D91; /* dark (lighter) */
}
.btl-ridge-inner,
.btl-ridge-inner-left-right,
.btl-ridge-inner-left {
	border-left: 1px solid #E6E8EB; /* light */
}
/* groove */
.btl-groove,
.btl-groove-top-bottom,
.btl-groove-top {
	border-top: 1px solid #8B8D91; /* dark (lighter) */
}
.btl-groove,
.btl-groove-left-right,
.btl-groove-right {
	border-right: 1px solid #E6E8EB; /* light */
}
.btl-groove,
.btl-groove-top-bottom,
.btl-groove-bottom {
	border-bottom: 1px solid #E6E8EB; /* light */
}
.btl-groove,
.btl-groove-left-right,
.btl-groove-left {
	border-left: 1px solid #8B8D91;; /* dark (lighter) */
}
.btl-groove-inner,
.btl-groove-inner-top-bottom,
.btl-groove-inner-top {
	border-top: 1px solid #000000; /* dark */
}
.btl-groove-inner,
.btl-groove-inner-left-right,
.btl-groove-inner-right {
	border-right: 1px solid #D0D2D6; /* light (darker) */
}
.btl-groove-inner,
.btl-groove-inner-top-bottom,
.btl-groove-inner-bottom {
	border-bottom: 1px solid #D0D2D6; /* light (darker) */
}
.btl-groove-inner,
.btl-groove-inner-left-right,
.btl-groove-inner-left {
	border-left: 1px solid #000000; /* dark */
}
/* head / bar / label / focus indication */
.btl-head,
.btl-bar {
	cursor: default;
}
.btl-label {
	display: block;
	padding: 5px;
}
.btl-focusIndicatorContainer {
	padding: 2px;
}
.btl-focusIndicator {
	padding: 1px;
}
.btl-focusIndicator .btl-label {
	padding: 2px;
}
.btl-focusIndicator-visible {
	border: 1px dotted #B3B5B9;
	padding: 0;
}
.btl-icon {
	padding-left: 25px;
	background-repeat: no-repeat;
	background-position: 4px center;
}
.btl-focusIndicatorContainer .btl-focusIndicator .btl-icon {
	padding-left: 22px;
	background-position: 1px center;
}]]></d:resource>

			<!-- ANIMATION ATTRIBUTES -->
			<d:attribute name="animateTransitions" default="false" onmap="btl.skinSettings.animateTransitions = btl.isTrueValue(name, value)">
				
			</d:attribute>

			<!--  TEXT COLORS  -->
			<d:attribute name="normalText" default="#000" onchange="this.createStyleSheet()">
				
			</d:attribute>

			<d:attribute name="highlightText" default="#FFF" onchange="this.createStyleSheet()">
				
			</d:attribute>

			<d:attribute name="activeText" default="#000" onchange="this.createStyleSheet()">
				
			</d:attribute>

			<d:attribute name="infoText" default="#000" onchange="this.createStyleSheet()">
				
			</d:attribute>

			<d:attribute name="disabledText" default="#999" onchange="this.createStyleSheet()">
				
			</d:attribute>

			<!--  BORDER COLORS  -->
			<d:attribute name="normalBorder" default="#35A0E9" onchange="this.createStyleSheet()">
				
			</d:attribute>

			<d:attribute name="highlightBorder" default="#B2DBF6" onchange="this.createStyleSheet()">
				
			</d:attribute>

			<d:attribute name="activeBorder" default="#35A0E9" onchange="this.createStyleSheet()">
				
			</d:attribute>

			<d:attribute name="infoBorder" default="#35A0E9" onchange="this.createStyleSheet()">
				
			</d:attribute>

			<d:attribute name="disabledBorder" default="#AAA" onchange="this.createStyleSheet()">
				
			</d:attribute>

			<!--  BACKGROUND COLORS -->
			<d:attribute name="normalBackground" default="#FFF" onchange="this.createStyleSheet()">
				
			</d:attribute>

			<d:attribute name="highlightBackground" default="#35A0E9" onchange="this.createStyleSheet()">
				
			</d:attribute>

			<d:attribute name="activeBackground" default="#B2DBF6" onchange="this.createStyleSheet()">
				
			</d:attribute>

			<d:attribute name="infoBackground" default="#EAF5FC" onchange="this.createStyleSheet()">
				
			</d:attribute>

			<d:attribute name="disabledBackground" default="#FFF" onchange="this.createStyleSheet()">
				
			</d:attribute>

			<d:handler event="DOMNodeInsertedIntoDocument" type="text/javascript"><![CDATA[
				this.createStyleSheet();
			]]></d:handler>

			<d:handler event="DOMNodeRemovedFromDocument" type="text/javascript"><![CDATA[
				// when the element is destructed, the default stylesheet should be set.
				btl.skinSettings.createStyleSheet();
			]]></d:handler>

			<d:method name="createStyleSheet">
				
				<d:body type="text/javascript"><![CDATA[
					btl.skinSettings.createStyleSheet(this.getCss());
				]]></d:body>
			</d:method>

			<d:method name="getCss">
				
				<d:body type="text/javascript"><![CDATA[
					var sCSS = '';
					// text colors
					var aPrefix = ['normal', 'highlight', 'active', 'info', 'disabled'];
					var aPostfix = ['Text', 'Border', 'Background', 'BackgroundAsBorder'];
					var iLimit = aPrefix.length;

					var sValue;
					var sName = aPrefix[0] + aPostfix[0];
					sCSS += '.btl-chameleon-'+ sName + ' { color:' + this.getAttribute(sName) + ';} ';
					for(var i=1; i < iLimit; i++){
						sName = aPrefix[i] + aPostfix[0];
						sCSS += '.btl-chameleon-'+ sName + ' { color:' + this.getAttribute(sName) + ' !important;} ';
					}

					sName = aPrefix[0] + aPostfix[1];
					var sName2 = aPrefix[0] + aPostfix[3];
					sValue = this.getAttribute(sName);
					sCSS += '.btl-chameleon-'+ sName + ' { border-color:' + sValue + '; } ';
					sCSS += '.btl-chameleon-'+ sName2 + ' { background-color:' + sValue + '; } ';
					for(var i=1; i < iLimit; i++){
						sName = aPrefix[i] + aPostfix[1];
						sName2 = aPrefix[i] + aPostfix[3];
						sValue = this.getAttribute(sName);
						sCSS += '.btl-chameleon-'+ sName + ' { border-color:' + sValue + ' !important; } ';
						sCSS += '.btl-chameleon-'+ sName2 + ' { background-color:' + sValue + ' !important; } ';
					}

					sName = aPrefix[0] + aPostfix[2];
					sCSS += '.btl-chameleon-'+ sName + ' { background-color:' + this.getAttribute(sName) + ';} ';
					for(var i=1; i < iLimit; i++){
						sName = aPrefix[i] + aPostfix[2];
						sCSS += '.btl-chameleon-'+ sName + ' { background-color:' + this.getAttribute(sName) + ' !important;} ';
					}

					return sCSS;
				]]></d:body>
			</d:method>
		</d:element>
	</d:namespace>
</d:tdl>